<template>
	<view class="main">
		<view class="content">
			<!-- 地图容器 -->
			<map id="mapContainer" style="width: 300px; height: 200px;" :longitude="lng" :latitude="lat"
				:markers="markers" @regionchange="onRegionChange">
			</map>
			<view class="drama-list pdb-10">
				<view v-for="(item, index) in dramaList" :key="index"
					@click="playDrama(item)">
					<u-cell :title="'第'+(index+1)+'步'" :label="item.dramaContent">
						<u-icon slot="icon" size="32" :name="item.iconName"></u-icon>
					</u-cell>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const file = uni.getFileSystemManager();
	const innerAudioContext = uni.createInnerAudioContext();
	import {
		storyById
	} from '@/api/storyApi/storyManage.js'
	import {
		dramaCoordinates,
		list,
		textToAudio,
		selectDramaDetail
	} from '@/api/storyApi/dramaManage.js'
	export default {
		data() {
			return {
				story: {
					storyId: null,
					storyName: '',
					synopsis: '',
					img: '',
				},
				dramaList: {},
				idList: [],
				onUpload: true,
				introduction: '', //景点简介
				scenicName: '', //景点名
				map: null, // 用于存储地图实例
				markerInfo: '', //景点的所有信息
				markers: [] ,//景点信息
				audioText:'',
				audioUrl:'',
				lng:'116.397128',
				lat:'39.916527'
			}
		},
		onLoad(options) {
			let drama = {
				storyId: options.storyId,
				dramaStatus: '0',
				orderByColumn: 'drama_sequence',
			}
			storyById(drama).then(res => {
				this.story = res.data
				wx.setNavigationBarTitle({
					title: res.data.storyName
				})
			})
			list(drama).then(res => {
				// this.dramaList = res.rows
				this.dramaList = res.rows.map(item => {
				    return {
				      ...item,
				      iconName: 'play-circle-fill', // 添加 iconName 属性并初始化为初始图标的名称
				    };
				  });
				this.idList = res.rows.map(item => item.attractionsId);
				this.businessAttractions()
			})
		},
		onReady() {
			this.map = wx.createMapContext('mapContainer');
			// this.businessAttractions()
		},
		onLaunch() {
			// this.businessAttractions()
		},
		methods: {
			onRegionChange(e) {
				console.log("e", e)
				if (e.type === 'end' && (e.causedBy === 'drag' || e.causedBy === 'scale')) {
					this.showPopup = false;
					// 获取当前地图的缩放级别
					this.map.getScale({
						success: (res) => {
							const scale = res.scale;
							if (scale < 10) {
								this.markers.forEach((marker) => {
									// 将标记和气泡都设为不显示状态
									marker.width = 0;
									marker.height = 0;
								});
							} else {
								this.markers.forEach((marker) => {
									// 根据实际需要调整大小
									marker.width = 2 * scale;
									marker.height = 2 * scale;
								});
							}

							this.$set(this, 'markers', this.markers);
						}
					});
				}
			},
			//获取剧情相关景点
			businessAttractions() {
				dramaCoordinates(this.idList).then(res => {
					res.data.forEach((data) => {
						data.width = 20;
						data.height = 20;
						this.markers.push(data)
					})
				})
			},
			//文字转语音
			playDrama(item) {
				let dramaContent = item.dramaContent
				if(this.audioText == dramaContent){
					this.playAudio(item,this.audioUrl)
				}else{
					this.map = wx.createMapContext('mapContainer');
					textToAudio("text="+dramaContent).then(resp => {
						const fileName = 'temp_mp3_' + Date.now() + '.mp3' // 自定义文件名
						let filePath = wx.env.USER_DATA_PATH + "/" + fileName;
						let that = this;
						file.writeFile({
							filePath,
							data: resp,
							encoding: 'binary',
							success() {
								that.audioUrl = filePath
								that.playAudio(item,filePath)
							}
						})
					})
				}
			},
			playAudio(item,filePath){
				if (filePath) {
					if (this.audioText == item.dramaContent && !innerAudioContext.paused) {
						innerAudioContext.stop(); // 停止
						item.iconName = 'play-circle-fill'
						return;
					}
					this.audioText = item.dramaContent; // 将路径赋值给定义的变量好做判断
					innerAudioContext.src = filePath; // 配置音频播放路径
					innerAudioContext.play(); // 播放
					item.iconName = 'pause-circle-fill'
					innerAudioContext.autoplay = true
					innerAudioContext.volume = 0.3
					innerAudioContext.obeyMuteSwitch = false
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		padding: 10px;
	}

	.drama-list {
		margin-top: 20px;
		min-height: 150px;
	}

	.map-container {
		position: relative;
		width: 100%;
		height: 400px;
	}

	.cover-view {
		position: absolute;
		top: calc(50% - 150rpx);
		left: calc(50% - 250rpx);
		/* opacity: .7; */
	}

	.flex-wrp {
		display: flex;
	}

	.flex-item {
		width: 90%;
		height: 300rpx;
		font-size: 26rpx;
	}

	.demo-text-1 {
		background: rgba(255, 255, 255, 0.7);
	}


	.spotIntroduction {
		font-size: 32rpx;
		padding: 10px 10px;
	}

	.scenicName {
		font-size: 35rpx;
		padding: 10px 10px;
	}

	.journey-main {
		overflow-y: scroll; // 超出滚动
		overscroll-behavior: none; // 禁止滚动溢出
	}
</style>